<template>
  <div>
      <van-cell title="搜索历史">
         <div v-if="isDeleteShow">
            <!--
                prop数据如果是引用类型（数组，对象）可以修改，
                注意这个修改指的是:user.name="xx" user.push(1) arr.splice(0)
                但是任何prop数据都不能重新赋值 xxx=xxx
                如果你想要的让prop数据等于新数据 必须让父组件自己修改
            -->
             <span @click="allDel()">全部删除</span>&nbsp;&nbsp;
             <span @click="isDeleteShow=!isDeleteShow">完成</span>
         </div>
         <van-icon name="delete" v-else @click="isDeleteShow=!isDeleteShow"/>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item,index ) in  searchHistories"
        :key="index"
        @click="del(index,item)"
        >
          <van-icon name="close" v-show="isDeleteShow"/>
        </van-cell>
  </div>
</template>
<script>
// import {setItem} from "@/utils/storage.js"
export default {
  name: 'SearchHistory',
  props:{
    searchHistories:{
      type:Array,
      required:true
    }
  },
  components: { },
  directives: {  },
  data() {
    return {
      isDeleteShow:false
    };
  },

  mounted() {

  },

  methods: {
    allDel(){
       this.$emit('updata-history',[])
    },
    del(index,history){
      if(this.isDeleteShow){
         this.searchHistories.splice(index,1)
         //持久化数据
         //1.修改本地存储的数据

         //setItem('search-historys',this.searchHistories)

         //2.请求接口删除线上数据
         //无论是否登陆都把数据持久化到本地
         //如果已登录删除线上数据
         // 没有删除单个的接口 只有删除所有历史记录的接口
         return
      }
      //非删除状态，展示搜索结果
      this.$emit('search',history)
    }
  },
};
</script>
<style lang="less" scoped>

</style>
